<template lang="pug">
  .header-help
    .titleBox
      a.block(@click="visible = true" href="javascript:")
        span.iconBox
        img(src="@/assets/bangzhu.png")
        p 帮助
    el-dialog(
      :visible="visible"
      append-to-body
      center
      v-el-drag-dialog
      @close="$_handleCancel"
    )
      el-tabs(v-model="activeName")
        el-tab-pane(label="常见问题" name="help")
          <iframe src="https://res.xxwbaby.com/public/agreement/pc_app_help.html" width="100%" height="500px" name="demo" scrolling="auto" sandbox="allow-same-origin allow-scripts" />
        el-tab-pane(label="视频教程" name="video")
          <iframe src="https://res.xxwbaby.com/public/agreement/helpVideo/help_video.html" width="100%" height="500px" name="demo" scrolling="auto" sandbox="allow-same-origin allow-scripts allow-popups" allow="autoplay" allowfullscreen/>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  directives: { elDragDialog },
  data () {
    return {
      visible: false,
      activeName: 'help'

    }
  },
  methods: {
    $_handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.videoList{
  margin: 0;
  padding: 0;

  > ol {
    padding-left: 16px;
    position: relative;

    &::before{
      content: '';
      display: block;
      position: absolute;
      background: $yellow;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      left: 0;
      top: 50%;
      margin-top: -2px;
    }

    a {
      color: $--color-text-secondary;
      font-size: 13px;

      &:hover{
        color: $--color-text-regular
      }
    }

    + ol {
      margin-top: 20px
    }
  }
}
.block{
  display: flex;
  img{
    margin-right: 16px;
    width: 24px !important;
  }
}
</style>
